<script setup>
import request from '@/utils/request';
import { getFromLocalStorage } from '@/utils/store-data';
import { onMounted } from 'vue';
import { ref } from 'vue';

const type        = ref('')
const operation   = ref('')
const pageNum     = ref(1)
const pageSize    = ref(5)
const tableData   = ref([])
const total       = ref(0)
const ids         = ref([])
const optUser     = ref('')
const currentUser = getFromLocalStorage("current-user")
const queryOPT    = ref(['新增', '修改', '删除'])

const resetQuery  = () => {
  operation.value = ''
  type.value      = ''
  optUser.value   = ''
  getData()
}
const delBatch = () => {
  if (!ids.value.length) {
    showWarningMsg("请选择要删除的数据")
    return
  } else {
    ElMessageBox.confirm('您确认批量删除这些数据吗？', '确认删除', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    }).then(() => {
      request({
        url: '/logs/delete/batch',
        method: 'DELETE',
        data: ids.value
      }).then((res) => {
        if (res.code === '200') {
          showSuccessMsg("操作成功"),
            getData(1)
        } else {
          showErrorMsg(res.msg)
        }
      })
    }).catch(() => showDefaultmsg("取消删除"))
  }
}
const handleSelectionChange = (rows) => ids.value = rows.map(e => e.id)
const del = (id) => {
  ElMessageBox.confirm(
    '确定要删除吗',
    '警告',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    }
  ).then(() => {
    request({
      url: `/logs/delete/${id}`,
      method: 'DELETE'
    }).then((res) => {
      if (res.code === '200') {
        showSuccessMsg("操作成功")
        getData(1)
      } else {
        showErrorMsg(res.msg)
      }
    })
  }).catch(() => {
    showDefaultmsg("取消删除")
  })
}
const getData = (newPageNum) => {
  if (newPageNum) pageNum.value = newPageNum
  request({
    url: '/logs/selectByPage',
    method: 'GET',
    params: {
      pageNum: pageNum.value,
      pageSize: pageSize.value,
      operation: operation.value,
      type: type.value,
      user: optUser.value,
    }
  }).then(res => {
    tableData.value = res.data.records
    total.value = res.data.total
  })
}
const handleCurrentChange = (newPageNum) => getData(newPageNum)
onMounted(() => getData(1))
</script>

<template>
  <div class="content">
    <div>
      <el-input style="width: 200px" placeholder="查询模块" v-model="operation"></el-input>
      <el-select v-model="type" placeholder="操作类型" style="width: 200px;margin: 0 5px;">
        <el-option v-for="item in queryOPT" :key="item" :value="item" :label="item"/>
      </el-select>
      <el-input style="width: 200px" placeholder="查询操作人" v-model="optUser"></el-input>
      <el-button type="primary" style="margin-left: 10px" @click="getData(1)">查询</el-button>
      <el-button type="info" @click="resetQuery">重置</el-button>
    </div>
    <div style="margin: 10px 0">
      <el-button type="danger" plain @click="delBatch">批量删除</el-button>
    </div>
    <!-- table -->
    <el-table :data="tableData" stripe :header-cell-style="{ backgroundColor: 'aliceblue', color: '#666' }" @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55" align="center"></el-table-column>
      <el-table-column prop="id" label="序号" width="70" align="center"></el-table-column>
      <el-table-column prop="operation" label="操作模块"></el-table-column>
      <el-table-column prop="type" label="操作类型">
        <template v-slot = "scope">
        <el-tag   type   = "primary" v-if = "scope.row.type === '新增'">{{ scope.row.type }}</el-tag>
        <el-tag   type   = "info" v-if    = "scope.row.type === '修改'">{{ scope.row.type }}</el-tag>
        <el-tag   type   = "danger" v-if  = "scope.row.type === '删除'">{{ scope.row.type }}</el-tag>
        <el-tag   type   = "danger" v-if  = "scope.row.type === '批量删除'">{{ scope.row.type }}</el-tag>
        <el-tag   type   = "success" v-if = "scope.row.type === '登录'">{{ scope.row.type }}</el-tag>
        <el-tag   type   = "success" v-if = "scope.row.type === '注册'">{{ scope.row.type }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="ip" label="操作人IP"></el-table-column>
      <el-table-column prop="user" label="操作人"></el-table-column>
      <el-table-column prop="time" label="操作时间"></el-table-column>
      <el-table-column label="操作" align="center" width="180">
        <template v-slot="scope">
          <el-button type="danger" plain @click="del(scope.row.id)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- pagination -->
    <div style="margin: 10px 0">
      <el-pagination @current-change="handleCurrentChange" :current-page="pageNum" :page-size="pageSize" layout="total, prev, pager, next" :total="total"> </el-pagination> </div> 
    </div>
</template>

<style lang="scss" scoped>
.content {
  
}
</style>
